:root {
  // 品牌部分
  --brand-7: #3352a3;
  --brand-6: #4975e9; // 常规品牌主色
  --brand-5: #6d91ed; // 品牌主色,80%
  --brand-4: #92acf2; // 品牌主色,60%
  --brand-3: #b6c8f6; // 品牌主色,40%
  --brand-2: #dbe3fb; // 品牌主色,20%
  --brand-1: #edf1fd; // 品牌主色,10%
  // 补充
  --brand2-4: #3352a3; // 点击
  --brand2-3: #809ef0; // 悬浮
  --brand2-2: #b6c8f6; // 禁用
  --brand2-1: #edf1fd; // 禁用

  // 文字部分
  --text-5: #1a1d23; // 强调/正文标题
  --text-4: #4b4c4d; // 次强调/正文标题
  --text-3: #8c8d93; // 次要信息
  --text-2: #c9cdd4; // 置灰信息
  --text-1: #fff; // 纯白文字
  // 补充
  --text-2-7: #212533; // 强调/正文标题
  --text-2-6: #3d455f; // 次强调/正文标题
  --text-2-5: #69718c; // 次要信息
  --text-2-4: #8f98b2; // 辅助信息
  --text-2-3: #b4bacc; // 提示信息
  --text-2-2: #dadfe9; // 置灰信息
  --text-2-1: #fff; // 纯白文字

  // 线条部分
  --line-4: #86909c; // 重/按钮描边
  --line-3: #c9cdd4; // 深/悬浮
  --line-2: #e5e6eb; // 一般
  --line-1: #f2f3f5; // 浅

  // 填充部分
  --fill-7: rgb(0 0 0 / 60%); // 弹窗遮罩蒙版
  --fill-6: #ddd; // 强调/图标/按钮框颜色
  --fill-5: #fafafa; // 深/灰底悬浮
  --fill-4: #f0f0f0; // 一般/常规/白底悬浮
  --fill-3: #f7f7f8; // 背景色
  --fill-2: #f7f8fa; // 浅/禁用
  --fill-1: #fff; // 白色

  // warning部分
  --warning-6: #E6A23C; // 常规
  --warning-5: #f09964; // 提示-80%
  --warning-4: #f4b38b; // 提示-60%
  --warning-3: #f7ccb1; // 提示-40%
  --warning-2: #fbe6d8; // 提示-20%
  --warning-1: #fdf2ec; // 提示-10%

  // success部分
  --success-6: #66c6af; // 常规
  --success-5: #85d1bf; // 成功-80%
  --success-4: #a3ddcf; // 成功-60%
  --success-3: #c2e8df; // 成功-40%
  --success-2: #e0f4ef; // 成功-20%
  --success-1: #f0f9f7; // 成功-10%

  // error部分
  --error-6: #e84a58; // 常规
  --error-5: #ed6e79; // 错误-80%
  --error-4: #f1929b; // 错误-60%
  --error-3: #f6b7bc; // 错误-40%
  --error-2: #fadbde; // 错误-20%
  --error-1: #fdedee; // 错误-10%

  // z-index
  --pop-index: 2010; // 弹窗层级

  // 文字部分
  --font-12: 12px; // 辅助文案
  --font-13: 13px; // 正文-常规-小
  --font-14: 14px; // 正文-常规-大
  --font-16: 16px; // 标题-小
  --font-20: 20px; // 标题-中
  --font-24: 24px; // 标题-大
  --font-36: 36px; // 运营标题-小
  --font-48: 48px; // 运营标题-中
  --font-56: 56px; // 运营标题-大

  // 行高部分
  --line-height-12: 20px; // 辅助文案
  --line-height-13: 22px; // 正文-常规-小
  --line-height-14: 22px; // 正文-常规-大
  --line-height-16: 24px; // 标题-小
  --line-height-20: 28px; // 标题-中
  --line-height-24: 32px; // 标题-大
  --line-height-36: 44px; // 运营标题-小
  --line-height-48: 56px; // 运营标题-中
  --line-height-56: 64px; // 运营标题-大

  // 覆写element主题

  --el-color-primary: var(--brand-6);
  --el-color-primary-light-3: var(--brand2-3);
  --el-color-primary-light-5: var(--brand2-2);
  --el-color-primary-dark-2: var(--brand2-4);

}

$sizeList: 12, 13, 14, 16, 20, 24, 36, 48, 56;

// 文字
// UI => 写法: 12/CN-Regular => cn-regular-12
$weightList:
  400 'regular',
  500 'medium',
  600 'bold';
@each $weightNumber, $weightName in $weightList {
  @each $size in $sizeList {
    .cn-#{$weightName}-#{$size} {
      font-size: var(--font-#{$size});
      font-style: normal;
      font-weight: $weightNumber;
      line-height: var(--line-height-#{$size});
      color: var(--text-5);
    }
  }
}

// 数字
// UI => 写法: 12/N-Regular => n-regular-12
$nameList:
  'number' 'regular',
  'number-medium' 'medium',
  'number-bold' 'bold';
@each $family, $name in $nameList {
  @each $size in $sizeList {
    .n-#{$name}-#{$size} {
      font-family: $family;
      font-size: var(--font-#{$size});
      font-style: normal;
      line-height: var(--line-height-#{$size});
      color: var(--text-5);
    }
  }
}

// 边距
$types:
  'margin' 'm',
  'padding' 'p';
$directions:
  'right' 'r',
  'left' 'l',
  'top' 't',
  'bottom' 'b';
@each $type, $type-abbreviation in $types {
  @each $direction, $direction-abbreviation in $directions {
    @for $i from 2 through 40 {
      .#{$type-abbreviation}#{$direction-abbreviation}-#{$i} {
        #{$type}-#{$direction}: #{$i}px;
      }
    }
  }
}

// 字体颜色
@for $i from 1 through 7 {
  .brand-#{$i} {
    color: var(--brand-#{$i});
  }
  .text-#{$i} {
    color: var(--text-#{$i});
  }
  .text-2-#{$i} {
    color: var(--text-2-#{$i});
  }
  .error-#{$i} {
    color: var(--error-#{$i});
  }
  .warning-#{$i} {
    color: var(--warning-#{$i});
  }
}
